<template>
	<view>

		<view class="item-change" @click="editWechat">
			<image class="item-change-image" src="../../static/workbench/address_book.png" mode="aspectFit"></image>
			<view class="item-change-value">我的微信号：{{(userInfo&&userInfo.wechat&&userInfo.wechat.length)?formatString(userInfo.wechat,1,1):'未填写'}},手机号{{(userInfo&&userInfo.phone&&userInfo.phone.length)?formatString(userInfo.phone,3,4):'未绑定'}}</view>
			<image class="item-change-edit" src="../../static/workbench/edit.png" mode="aspectFit"></image>
		</view>

		<view class="myInviteUser" v-if="inviteUserInfo">
			<view style="margin-left: 30upx;font-size: 26rpx; margin-top: 30rpx;">我的邀请人</view>
			<view class="info-view">
				<image class="head-image-view" :src="inviteUserInfo.headimgurl" mode="aspectFill"></image>
				<view class="info-content-view">
					<view class="info">
						<view class="info-name util-font-medium">{{formatString(inviteUserInfo.nickname, 1, 0)}}</view>
						
					</view>
					<view class="info">
						<view class="info-other util-font-medium">邀请时间：</view>
						<view class="info-other util-font-medium">2020-07-10 14:25:25</view>
					</view>
					<!-- <view class="info">
						<view class="info-other util-font-medium">累计收益：￥</view>
						<view class="info-other util-font-medium">1*****</view>
						<view class="info-other util-font-medium" style="margin-left: 20rpx;margin-right: 10rpx;">|</view>
						<view class="info-other util-font-medium">团队：￥</view>
						<view class="info-other util-font-medium">5****</view>
						<view class="info-other util-font-medium">人</view>
					</view> -->
			
				</view>
			</view>
			<view class="other-item-change">
				<image class="item-change-image" src="../../static/workbench/address_book.png" mode="aspectFit"></image>
				<view class="item-change-value">TA的微信号：{{(inviteUserInfo&&inviteUserInfo.wechat&&inviteUserInfo.wechat.length)?formatString(inviteUserInfo.wechat,1,1):'未填写'}},手机号{{(inviteUserInfo&&inviteUserInfo.phone&&inviteUserInfo.phone.length)?formatString(inviteUserInfo.phone,3,4):'未绑定'}}</view>
				<view class="item-change-lx" @click="contact">联系TA</view>
			</view>
		</view>
		<scroll-view class="JSSegmentedControl" scroll-x="trues" @scroll="scroll">
			<view class="JSSegmentedControlItem" v-for="(item, index) in segmentedControlTitles" :key="index" @click="segmentControlDidSelected(index)">
				<view :class="[segmentedControlSelectedIndex == index ? 'JSSegmentedControlItemTitle-selected' : 'JSSegmentedControlItemTitle-normal']">{{item}}</view>
				<view :class="[segmentedControlSelectedIndex == index ? 'JSSegmentedControlItemHint-selected' : 'JSSegmentedControlItemHint']">({{segmentedHint[index]}})</view>
				<view :class="[segmentedControlSelectedIndex == index ? 'JSSegmentedControlItemLine lineSelected' : 'JSSegmentedControlItemLine lineNormal']"></view>
			</view>
		</scroll-view>
		<view class="scroll-view" v-if="!dataListIsEmpty">
			<view class="people-info-view" v-for="(item, index) in dataList" :key="index">
				<image class="head-image-view-people" :src="item.headimgurl" mode="aspectFill"></image>
				<view class="people-info-content-view">
					<view class="info-people" style="margin-top: 25rpx;">
						<view class="people-name util-font-medium">{{formatString(item.nickname, 2, 0)}}</view>
						<!-- <view class="people-city util-font-medium">济南市</view> -->
						<view class="people-items util-font-medium">{{(item.teamType==1)?"注册粉丝":((item.teamType==2)?"直属达人":"间接达人")}}</view>
					</view>
					<view class="info-people" style="margin-top: 10rpx;">
						<view class="people-other util-font-medium">邀请时间：</view>
						<view class="people-other util-font-medium">{{item.becomeExpertTime}}</view>
					</view>
					<!-- <view class="info-people">
						<view class="people-other util-font-medium">贡献1单</view>
						<view class="people-other util-font-medium" style="margin-left: 20rpx;margin-right: 20rpx;"> | </view>
						<view class="people-other util-font-medium">贡献收益:￥0.00</view>
						<view class="people-other util-font-medium" style="margin-left: 20rpx;margin-right: 10rpx;"> | </view>
						<view class="people-other util-font-medium">团队:1人</view>
					</view> -->

				</view>

				<!-- <image class="item-title-image" src="../../static/mine/arrow-right.png" mode="aspectFit"></image> -->
			</view>
			<uni-load-more v-if="currentPage == totalPage" :status="'none'" @clickLoadMore="loadMore"></uni-load-more>
			<uni-load-more v-else :status="'none'" @clickLoadMore="loadMore"></uni-load-more>
		</view>
		<view v-else class="empty-view">
			<image class="empty-image" src="../../static/noData.png" mode="aspectFit"></image>
			<view class="empty-title util-font-medium">暂无数据</view>
		</view>
		<uni-popup ref="uniPop" type="center">
			<view class="uniPop-view" v-if="inviteUserInfo">
				<image class="uniPop-headimg" :src="inviteUserInfo.headimgurl" mode="aspectFill"></image>
				<view class="uniPop-name util-font-regular">{{formatString(inviteUserInfo.nickname, 1, 0)}}</view>
				<image class="uniPop-button" style="margin-top: 60rpx;" src="../../static/workbench/copy_wechat.png" mode="aspectFit" @click="copyNumber(0)"></image>
				<image class="uniPop-button" src="../../static/workbench/copy_mobile.png" mode="aspectFit" @click="copyNumber(1)"></image>
				<image class="uniPop-close-button" src="../../static/workbench/icon_close.png" mode="aspectFit" @click="uniPopClose"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPop from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPop
		},
		data() {
			return {
				segmentedControlTitles: ["我的队员", "注册粉丝", "直属达人", "间接达人"],
				segmentedHint: ["0", "0", "0", "0"],
				segmentedControlSelectedIndex: 0,

				// 列表数据
				currentPage: 1,
				totalPage: 1,
				dataList: [],
				dataListIsEmpty: false,
				
				userInfo: null,
				inviteUserInfo: null,
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.segmentControlDidSelected(0)
		},
		onPullDownRefresh() {
			this.headerRefresh()
		},
		onReachBottom() {
			if (this.currentPage >= this.totalPage) {
				
			}else{
				this.currentPage += 1
				this.loadData()
			}
		},
		methods: {
			segmentControlDidSelected: function(index) {
				this.segmentedControlSelectedIndex = index
				this.headerRefresh()
			},
			headerRefresh: function(){
				this.loadinviteUserData(this.userInfo.superiorId)
				this.loadNumberData()
				this.totalPage = 1
				this.currentPage = 1
				this.dataList = []
				this.loadData()
			},
			loadinviteUserData: function(uid){
				if (!uid || uid.length == 0) {
					return
				}
				var that = this
				that.sendRequest({
					url: 'app/appUser/info/' + uid,
					method: 'GET',
					header: that.$urlRequest.getHeader('token'),
					success: res => {
						if (res.data.code == 0) {
							that.inviteUserInfo = res.data.data
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
				})
			},
			loadNumberData: function(){
				
				var that = this
				that.sendRequest({
					url: 'app/appUser/teamStatistics/' + that.userInfo.id,
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					success: res => {
						if (res.data.code == 0) {
							that.segmentedHint = [
								res.data.data.allNum,
								res.data.data.fansNum,
								res.data.data.directNum,
								res.data.data.indirectNum
							]
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
				})
			},
			loadData: function(){
				var that = this
				that.sendRequest({
					url: 'app/appUser/teamDetail',
					method: 'POST',
					header: that.$urlRequest.getHeader('token'),
					data: {
						appUserId: that.userInfo.id,
						selectType: that.segmentedControlSelectedIndex,
						limit: 10,
						page: that.currentPage
					},
					success: res => {
						if (res.data.code == 0) {
							that.totalPage = res.data.data.pages
							if (that.currentPage == 1) {
								that.dataList = []
							}
							that.dataList = that.dataList.concat(res.data.data.records)
							
							if (that.dataList.length == 0) {
								that.dataListIsEmpty = true
							}else{
								that.dataListIsEmpty = false
							}
							
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
				})
			},
			details:function(){
				uni.navigateTo({
					url: 'teamDetails'
				})
			},
			editWechat: function(){
				uni.navigateTo({
					url: '../mine/setting'
				})
			},
			contact: function(){
				this.$refs.uniPop.open()
			},
			copyNumber: function(index){
				var data = ''
				if (index == 0){
					data = this.inviteUserInfo.wechat
					if (data.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '微信号内容为空'
						})
					}
				}
				if (index == 1) {
					data = this.inviteUserInfo.phone
				}
				uni.setClipboardData({
					data: data
				})
			},
			uniPopClose: function(){
				this.$refs.uniPop.close()
			},
			formatString: function(string, number1, number2, number3) {
				let newString = string + ''
				let firstNumber = number1?number1:0
				let lastNumber = number2?number2:0
				let middleNumber = number3?number3:0
				if (newString.length == 0) {
					return '**'
				}
				let firstString = newString.slice(0, firstNumber)
				let lastString = newString.slice(newString.length-lastNumber, newString.length)
				var middleString = ''
				if (middleNumber == 0) {
					for (var i = 0; i < newString.length-firstNumber-lastNumber; i++) {
						middleString = middleString + '*'
					}
				}else{
					for (var i = 0; i < middleNumber; i++) {
						middleString = middleString + '*'
					}
				}
				return firstString + middleString + lastString
			}
		}
	}
</script>

<style>
	
	.item-change {
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		padding-left: 30rpx;
		padding-right: 30upx;
		background-color: #FEF5F0;
	}

	.other-item-change {
		height: 90rpx;
		line-height: 90rpx;
		position: relative;
		padding-left: 30rpx;
		padding-right: 30upx;
	}


	.item-change-image {
		width: 36rpx;
		height: 36rpx;
		margin-top: 27upx;
		display: inline-block;
		float: left;
	}

	.item-change-value {
		font-size: 20rpx;
		color: #333333;
		height: 36rpx;
		position: relative;
		float: left;
		display: inline-block;
		margin-left: 10rpx;
	}

	.item-change-edit {
		width: 36rpx;
		height: 36rpx;
		margin-top: 27upx;
		float: right;
	}

	.item-change-lx {
		float: right;
		font-size: 20rpx;
		color: #E95918;
		border-radius: 40rpx;
		width: 100rpx;
		text-align: center;
		height: 40rpx;
		margin-top: 27rpx;
		line-height: 40rpx;
		border-color: #E95918;
		border: 1upx solid;
	}


	.info {
		height: 56rpx;
	}

	.info-people {
		height: 40rpx;
	}

	.info-view {
		width: 690rpx;
		height: 140rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 30upx;
		border-bottom: 2upx solid #F8F8F8;
	}

	.people-info-view {
		width: 690rpx;
		height: 160rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 30upx;
		border-bottom: 10upx solid #F8F8F8;
		
	}

	.head-image-view {
		width: 100rpx;
		height: 100rpx;
		float: left;
		border-radius: 50rpx;
	}

	.head-image-view-people {
		width: 100rpx;
		height: 100rpx;
		margin-top: 20upx;
		float: left;
		border-radius: 50rpx;
	}

	.info-content-view {
		width: 575rpx;
		height: 100rpx;
		float: left;
		margin-left: 15rpx;
	}

	.people-info-content-view {
		width: 500rpx;
		height: 100rpx;
		float: left;
		margin-left: 15rpx;
	}


	.item-title-image {
		width: 40upx;
		height: 40upx;
		margin-top: 50upx;
		float: right;
		margin-right: 30upx;
	}

	.info-name {
		display: inline-block;
		color: #333333;
		font-size: 32rpx;
	}

	.people-name {
		display: inline-block;
		color: #333333;
		font-size: 30rpx;
	}

	.info-city {
		display: inline-block;
		color: #ED7E57;
		font-size: 30rpx;
		margin-left: 10rpx;
		padding: 5rpx 10rpx 5rpx 10rpx;
		border-radius: 10upx;
		background-color: #FCECE2;
	}

	.info-items {
		display: inline-block;
		color: #8A7648;
		font-size: 30rpx;
		margin-left: 10rpx;
		padding: 5rpx 10rpx 5rpx 10rpx;
		border-radius: 10upx;
		background-color: #FFF6DE;
	}

	.info-other {
		display: inline-block;
		color: #999999;
		font-size: 24rpx;
		/* margin-left: 10rpx; */
	}


	.people-city {
		display: inline-block;
		color: #ED7E57;
		font-size: 24rpx;
		margin-left: 10rpx;
		padding: 5rpx 10rpx 5rpx 10rpx;
		border-radius: 10upx;
		background-color: #FCECE2;
	}

	.people-items {
		display: inline-block;
		color: #8A7648;
		font-size: 24rpx;
		margin-left: 10rpx;
		padding: 5rpx 10rpx 5rpx 10rpx;
		border-radius: 10upx;
		background-color: #FFF6DE;
	}

	.people-other {
		display: inline-block;
		color: #999999;
		font-size: 24rpx;
	}

	.JSSegmentedControl {
		z-index: 9990;
		/* css变量 */
		width: 100%;
		display: flex;
		justify-items: space-around;
		height: 150upx;
		background-color: white;
		white-space: nowrap;
		border-bottom: 10upx solid #F8F8F8;
		border-top: 10upx solid #F8F8F8;
	}

	.JSSegmentedControl ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.JSSegmentedControlItem {
		display: inline-block;
		width: 190upx;
		height: 150upx;
		text-align: center;
		white-space: nowrap;
	}

	.JSSegmentedControlItemTitle-normal {
		font-size: 30upx;
		font-family: 'PingFangSC-Regular';
		/* color: rgba(255, 255, 255, 0.6); */
		color: #333333;
		margin-top: 15upx;
	}

	.JSSegmentedControlItemHint {
		font-size: 30upx;
		font-family: 'PingFangSC-Regular';
		/* color: rgba(255, 255, 255, 0.6); */
		color: #333333;
		margin-top: 15upx;
	}

	.JSSegmentedControlItemTitle-selected {
		font-size: 30upx;
		font-family: 'PingFangSC-Medium';
		color: #F19216;
		margin-top: 15upx;
	}

	.JSSegmentedControlItemHint-selected {
		font-size: 30upx;
		font-family: 'PingFangSC-Medium';
		color: #F19216;
		margin-top: 15upx;
	}

	.JSSegmentedControlItemLine {
		width: 60upx;
		height: 10upx;
		border-radius: 5upx;
		margin: 0 auto;
		margin-top: 15upx;
		background-color: #F19216;
	}

	.lineSelected {
		opacity: 1.0;
	}

	.lineNormal {
		opacity: 0.0;
	}

	/* 商品详情 */
	.scroll-view {
		background-color: #FFFFFF;
	}

	.item-backgroundView {
		width: 100%;
		box-sizing: border-box;
		background-color: white;
		position: relative;
	}

	.item-info-view {
		width: 690rpx;
		height: 120upx;
		overflow: hidden;
		margin-top: 30upx;
		padding: 0 30upx;
	}

	.item-info-content {
		width: 500upx;
		height: 120upx;
		margin-left: 30upx;
		float: left;
	}

	.item-info-number {
		color: #999999;
		font-size: 26upx;
		height: 34upx;
		line-height: 34upx;
	}

	.item-info-amount {
		color: #999999;
		font-size: 26upx;
		height: 36upx;
		line-height: 36upx;
	}

	.item-info-payment {
		height: 50upx;
		line-height: 50upx;
	}

	.item-info-payment-price1 {
		color: #666666;
		font-size: 28upx;
	}

	.item-info-payment-price2 {
		color: #ea6431;
		font-size: 20upx;
	}

	.item-info-payment-price3 {
		color: #ea6431;
		font-size: 36upx;
	}
	
	
	/* 空数据提示 */
	.empty-view {
		text-align: center;
		margin-top: 200upx;
	}
	
	.empty-image {
		width: 300upx;
		height: 210upx;
	}
	
	.empty-title {
		color: #999999;
		font-size: 32upx;
		margin-top: 30upx;
	}
	
	
	
	/* 弹窗 */
	.uniPop-view {
		width: 550rpx;
		height: 600rpx;
		background-color: white;
		border-radius: 20rpx;
		text-align: center;
		position: relative;
	}
	.uniPop-headimg {
		width: 130rpx;
		height: 130rpx;
		margin-top: 40rpx;
	}
	.uniPop-name {
		font-size: 36rpx;
		color: #333333;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.uniPop-button {
		width: 375rpx;
		height: 80rpx;
		margin-top: 30rpx;
	}
	.uniPop-close-button {
		width: 60rpx;
		height: 60rpx;
		padding: 30rpx;
		position: absolute;
		right: 0;
		top: 0;
	}
</style>
